<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<head>
<title>客户端</title>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" type="text/css" media="all" href="css/smoothness/jquery-ui-1.10.3.custom.min.css" />
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<!-- Pines Notify -->
<script type="text/javascript" src="js/jquery.pnotify.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.pnotify.default.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.pnotify.default.icons.css" />
<style type="text/css">
	body{ padding: 10px; }
</style>
<script type="text/javascript">
var socket;
var username;
var password;
var validated = false;
var $stockGrid;
	function send(message) {
		if (!window.WebSocket) {
			return;
		}
		if (socket.readyState == WebSocket.OPEN) {
			socket.send(message);
		} else {
			$.pnotify({
			    title: '网络错误',
			    text: 'Web Socket没有连接.',
			    type: 'error',
			    icon: 'picon picon-network-wireless'
			});
		}
	}
	
	$(function(){
		$stockGrid = $("#list2");
		$stockGrid.jqGrid({
		   	//url:'server.php?q=2',
			datatype: "json",
			colNames:[	"id","股票代号","股票名称","行情时间","最新价（元）",
			   			"昨收盘（元）","今开盘（元）","涨跌额（元）","最低（元）",
			   			"最高（元）","涨跌幅（%）","成交量（手）","成交额（万元）",
			   			"竞买价（元）","竞卖价（元）","委比（%）",
			   			"买一","买二","买三","买四","买五",
			   			"卖一","卖二","卖三","卖四","卖五"],
			   	colModel:[
					{name:'id', width:60, sortable:false},	//id
			   		{name:'code', width:80},	//1 股票代号
			   		{name:'name', width:80},					//2 股票名称
			   		{name:'date', width:160},					//3 行情时间
			   		{name:'newPrice', width:100, align:"right"},		//4 最新价（元）
			   		{name:'closingPrice', width:100, align:"right"},		//5 昨收盘（元）
			   		{name:'openingPrice', width:100, align:"right"},		//6	今开盘（元）
			   		{name:'changeAmount', width:100, align:"right"},		//7	涨跌额（元）
			   		{name:'bottomPrice', width:100, align:"right"},		//8	最低（元）
			   		{name:'topPrice', width:100, align:"right"},		//9	最高（元）
			   		{name:'changeRange', width:100, align:"right"},		//10	涨跌幅（%）
			   		{name:'volume', width:100, align:"right"},		//11成交量（手）
			   		{name:'turnover', width:100, align:"right"},		//12成交额（万元）
			   		{name:'bidPrice', width:100, align:"right"},		//13竞买价（元）
			   		{name:'askPrice', width:100, align:"right"},		//14竞卖价（元）
			   		{name:'commissionRadio', width:100, align:"right"},		//15委比（%）
			   		{name:'buy1', width:60, align:"right"},		//16
			   		{name:'buy2', width:60, align:"right"},		//17
			   		{name:'buy3', width:60, align:"right"},		//18
			   		{name:'buy4', width:60, align:"right"},		//19
			   		{name:'buy5', width:60, align:"right"},		//20
			   		{name:'sell1', width:60, align:"right"},		//21
			   		{name:'sell2', width:60, align:"right"},		//22
			   		{name:'sell3', width:60, align:"right"},		//23
			   		{name:'sell4', width:60, align:"right"},		//24
			   		{name:'sell5', width:60, align:"right"}		//25
			   	],
		   //	rowNum:26,
		   	//rowList:[10,20,30],
		   	//pager: '#pager2',
		   	//sortname: 'id',
		    viewrecords: true,
		    //sortorder: "desc",
		    caption:"股票数据"
		});
		//jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
		
		//$.pnotify.defaults.styling = "jqueryui";
		if (!window.WebSocket) {
			window.WebSocket = window.MozWebSocket;
		}
		if (window.WebSocket) {
			socket = new WebSocket("ws://localhost:8080/websocket");
			socket.onmessage = function(event) {
				var trunk = JSON.parse(event.data);
				console.log(trunk);
				if(trunk.type == 'message'){
					$.pnotify({
					    title: '消息',
					    text: trunk.value,
					    type: 'info'
					});
				}else if(trunk.type == 'data'){
					/* $.pnotify({
					    title: '消息',
					    text: '收到数据',
					    type: 'info'
					}); */
					var data = {
							"page":1,
							"total":0,
							"records":0,
							"rows":JSON.parse(trunk.value)
					};
					console.log(data.rows);
					$stockGrid[0].addJSONData(data);
				}else if(trunk.type == 'validated'){
					validated = true;
					$.pnotify({
					    title: '消息',
					    text: trunk.value,
					    type: 'info'
					});
					$('#login').slideUp();
				}else{
					$.pnotify({
					    title: '未知消息',
					    text: trunk.value,
					    type: 'info'
					});
				}
			};
			socket.onopen = function(event) {
				console.log('Web Socket 已连接.');
			};
			socket.onclose = function(event) {
				$.pnotify({
				    title: '提示',
				    text: 'Web Socket断开.'
				});
			};
		} else {
			alert("Your browser does not support Web Socket.");
		}
		
		$("input[type=submit]")
	      .button()
	      .click(function( event ) {
	    	  var req = {option:'login', name:$('#login_name').val(), password:$('#login_password').val()}
	    	  username = req.name;
	    	  password = req.password;
	    	  send(JSON.stringify(req));
	      });
		
		$('#testData').button().click(function(){
			var req = {option:'stock', name:username, password:password}
	   		send(JSON.stringify(req));
		});
	});
</script>
</head>
<body>
	<div id="login">
	用户名:<input id="login_name" type="text" value="planet"  />
	密码:<input id="login_password" type="password" value="123456"  />
	<input type="submit" value="登录" />
	</div>
	<div>
		<button id="testData">获取数据</button>
		&nbsp;<br />&nbsp;
	</div>
	<table id="list2"></table>
</body>
</html>
